<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>components</title>
		<link rel="stylesheet" href="css/components.min.css" />
    <!-- <link rel="stylesheet" href="css/usercenter.css" /> -->
		<style>
		  body{
        font-family: "microsoft yahei";
		    background-color: #F0F1F1;
		    padding-bottom: 50px;
		  }
		  *{
		    padding: 0;
		    margin: 0;
		    box-sizing: border-box;
		  }
      ul,dl,ol{
        list-style: none;
      }
		  .first-nav{
		    width: 200px;
        font-family: arial;
        font-size: 14px;
		    padding-left: 20px;
		  }
		  .second-nav {
		    padding-left: 12px;
		    font-size: 13px;
		  }
      .first-nav li a,
      .second-nav li a{
        color: #666;
        padding-left: 10px;
        text-decoration: none;
      }
      .first-nav li a:hover{
        color: #294A92;
        border-left: 2px solid #294A92;
      }
		  .main > h2{
		    font: 36px/1 arial;
		    padding-bottom: 5px;
		  }
		  .affix{
		    top: 20px;
		  }
		  .example{
		    position: relative;
		    padding: 45px 15px 15px;
		    margin: 0 0 0;
		    border-color: #DDD;
		    border-style: solid;
		    border-width: 1px;
		    border-radius: 4px 4px 0 0;
		    background-color: #fff;
        /*overflow: hidden;*/
		  }
		  .example:after{
		    position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: 700;
        color: #959595;
        text-transform: uppercase;
        letter-spacing: 1px;
        content: "Example";
		  }
		  pre{
		    padding: 9.5px;
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 4px;
		  } 
		  .example + .highlight pre{
		    margin-top: -1px;
        margin-right: 0;
        margin-left: 0;
        border-radius: 0;
        border-color: #DDD;
        border-width: 1px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
		  }
		  code{
        font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
		  }
      code span{
        line-height: 1.75;
      }
      .na {
        color: #4f9fcf;
      }
      .nt {
        color: #2f6f9f;
      }
      .s {
        color: #d44950;
      }
      .example-titles h1{
        margin-top: 0;
      }
      .example-colors span{
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        text-align: center;
      }
      .example .nav{
        font-family: "microsoft yahei"
      }
      .example-dropdowns{
        height: 240px;
      }
      .example-dropdowns .dropdown{
        float: left;
        width: 180px;
        margin-right: 20px;
      }
      .example-list > .list-group {
        width: 300px;
        margin-bottom: 20px;
      }
      .example-tooltips div a{
        margin-right: 50px;
      }
      .example-panels .panel {
        box-shadow: 0 0 3px 3px #f9f9f9;
        margin-bottom: 20px;
      }
      .example-modal .modal-content{
        width: 420px;
        margin-bottom: 30px;
      }
      .example-data-unit {
        overflow: hidden;
      }
      .example-data-unit .usercenter-content {
        float: none;
        width: 100%;
      }
      .example-data-unit .data-unit {
        margin-top: 20px;
      }
		</style>
	</head>
	<body>
	  <div class="container">
	    <div class="row">
        <div class="main col-md-9">
          <!--Buttons-->
          <h2 id="Breadcrumbs">Breadcrumbs</h2>
          <div class="example example-breadcrumbs">
            <ol class="breadcrumb">
              <li><a href="#">会员中心</a></li>
              <li><a href="#">消息中心</a></li>
              <li class="active">消息记录</li>
            </ol>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>会员中心<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>消息中心<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>消息记录<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span></code></pre></figure>
          <h2 id="Buttons">Buttons</h2>
          <p>按钮分为大中小三种，采用按钮颜色和尺寸组合的方式定义</p>
          <div class="example example-buttons">
            <p>宽度自适应：</p>
            <a class="btn btn-default btn-lg btn-block" href="#" role="button">Link</a>
            <a class="btn btn-primary btn-lg btn-block" href="#" role="button">Link</a>
            <a class="btn btn-primary btn-sm btn-block btn-inverse" href="#" role="button">Link</a>
            <a class="btn btn-highlight btn-xs btn-block" href="#" role="button">Link</a>
            <a class="btn btn-disabled btn-xs btn-block" href="#" role="button">Link</a>
            <p style="margin-top: 15px;">宽高固定大按钮：</p>
            <button class="btn btn-primary btn-lg" type="button">Button</button>
            <button class="btn btn-highlight btn-lg" type="button">Button</button>
            <button class="btn btn-disabled btn-lg" type="button">Button</button>
            <p style="margin-top: 15px;">宽高固定中按钮：</p>
            <input class="btn btn-default btn-sm" type="button" value="Input">
            <input class="btn btn-primary btn-sm" type="button" value="Input">
            <input class="btn btn-primary btn-sm btn-inverse" type="button" value="Input">
            <input class="btn btn-highlight btn-sm" type="button" value="Input">
            <p style="margin-top: 15px;">宽高固定小按钮：</p>
            <input class="btn btn-default btn-xs" type="submit" value="Submit">
            <input class="btn btn-primary btn-xs" type="submit" value="Submit">
            <input class="btn btn-primary btn-xs btn-inverse" type="submit" value="Submit">
            <input class="btn btn-highlight btn-xs" type="submit" value="Submit">
            <input class="btn btn-disabled btn-xs" type="submit" value="Submit">
            <p style="margin-top: 15px;">链接按钮：</p>
            <a class="btn btn-link">Link</a>
            <input type="button" class="btn btn-link" value="Input">
            <button type="button" class="btn btn-link">Button</button>
          </div>
          <figure class="highlight">
            <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg btn-block"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm btn-inverse btn-block"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-highlight btn-xs btn-block"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-disabled btn-xs btn-block"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
  
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-highlight btn-lg"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-disabled btn-lg"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm btn-inverse"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-highlight btn-sm"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/&gt;</span>
          
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-xs"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-xs"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-xs btn-inverse"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-highlight btn-xs"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-disabled btn-xs"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
          
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></code></pre>
          </figure>
          <a id="ButtonGroup"></a>
          <h2>Button groups</h2>
          <div class="example example-button-groups">
            <div class="btn-group btn-group-primary" role="group">
              <a class="btn btn-primary first-btn">上月</a>
              <a class="btn btn-primary last-btn">下月</a>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-inverse first-btn"</span><span class="nt">&gt;</span>上月<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-inverse last-btn"</span><span class="nt">&gt;</span>下月<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <h2 id="Tabs">Tabs</h2>
          <p>商城Tab：</p>
          <div class="example example-tabs">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active"><a href="#debt" aria-controls="debt" role="tab" data-toggle="tab">商城</a></li>
              <li role="presentation"><a href="#brand" aria-controls="brand" role="tab" data-toggle="tab">发布询价</a></li>
              <li role="presentation"><a href="#transfer" aria-controls="transfer" role="tab" data-toggle="tab">查看报价</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#debt"</span> <span class="na">aria-controls=</span><span class="s">"debt"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>商城<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#brand"</span> <span class="na">aria-controls=</span><span class="s">"brand"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>发布询价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#transfer"</span> <span class="na">aria-controls=</span><span class="s">"transfer"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>查看报价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">商城Tab：</p>
          <div class="example example-tabs">
            <ul class="nav nav-tabs-nub" role="tablist">
              <li role="presentation" class="active"><a href="#rocessing" aria-controls="rocessing" role="tab" data-toggle="tab">发布询价</a></li>
              <li role="presentation"><a href="#done" aria-controls="done" role="tab" data-toggle="tab">查看报价</a></li>
              <li role="presentation"><a href="#transfering" aria-controls="transfering" role="tab" data-toggle="tab">订单跟踪</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs-nub"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#rocessing"</span> <span class="na">aria-controls=</span><span class="s">"rocessing"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>发布询价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#done"</span> <span class="na">aria-controls=</span><span class="s">"done"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>查看报价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#transfering"</span> <span class="na">aria-controls=</span><span class="s">"transfering"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>订单跟踪<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">链接型Tab：</p>
          <div class="example example-tabs">
            <ul class="nav nav-tabs-link" role="tablist">
              <li role="presentation" class="active"><a href="#rocessing" aria-controls="rocessing" role="tab" data-toggle="tab">发布询价</a></li>
              <li role="presentation"><a href="#done" aria-controls="done" role="tab" data-toggle="tab">查看报价</a></li>
              <li role="presentation"><a href="#transfering" aria-controls="transfering" role="tab" data-toggle="tab">订单跟踪</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs-link"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#rocessing"</span> <span class="na">aria-controls=</span><span class="s">"rocessing"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>发布询价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#done"</span> <span class="na">aria-controls=</span><span class="s">"done"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>查看报价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#transfering"</span> <span class="na">aria-controls=</span><span class="s">"transfering"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>订单跟踪<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">可自适应平均宽度的Tab：</p>
          <div class="example example-tabs">
            <ul class="nav nav-tabs-link nav-justified" role="tablist">
              <li role="presentation" class="active"><a href="#rocessing" aria-controls="rocessing" role="tab" data-toggle="tab">发布询价</a></li>
              <li role="presentation"><a href="#done" aria-controls="done" role="tab" data-toggle="tab">查看报价</a></li>
              <li role="presentation"><a href="#transfering" aria-controls="transfering" role="tab" data-toggle="tab">订单跟踪</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs-link nav-justified"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#rocessing"</span> <span class="na">aria-controls=</span><span class="s">"rocessing"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>发布询价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#done"</span> <span class="na">aria-controls=</span><span class="s">"done"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>查看报价<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#transfering"</span> <span class="na">aria-controls=</span><span class="s">"transfering"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>订单跟踪<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <h2 id="Pills">Pills tabs</h2>
          <p>带指示Pills:</p>
          <div class="example example-pills">
            <ul class="nav nav-pills nav-pills-arrow">
              <li role="presentation" class="active"><a href="#">开思动态</a></li>
              <li role="presentation"><a href="#">媒体报道</a></li>
              <li role="presentation"><a href="#">行业动态</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-arrow"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>开思动态<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>媒体报道<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>行业动态<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <p>排序Pills:</p>
          <div class="example example-pills">
            <ul class="nav nav-pills nav-pills-rank">
              <li role="presentation" class="active"><a href="#">默认排序</a></li>
              <li role="presentation"><a href="#">默认排序</a></li>
              <li role="presentation"><a href="#">默认排序</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-rank"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>默认排序<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>默认排序<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>默认排序<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">Tab完整组件代码：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>

  <span class="c">&lt;!-- Nav tabs --&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Messages<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>

  <span class="c">&lt;!-- Tab panes --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <a id="PillsFilterGroup"></a>
          <h2 id="Pills">Pills filter group</h2>
          <div class="example example-pills">
            <ul class="nav nav-pills-filter">
              <li>
                <dl>
                  <dt class="filter-title">热门推荐：</dt>
                  <dd>
                    <a href="" class="filter-btn active">全部</a>
                    <a href="" class="filter-btn">收益最优</a>
                    <a href="" class="filter-btn">人气最旺</a>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt class="filter-title">购买期限：</dt>
                  <dd>
                    <a href="" class="filter-btn active">不限</a>
                    <a href="" class="filter-btn">30天以内</a>
                    <a href="" class="filter-btn">1-2月</a>
                    <a href="" class="filter-btn">1-3月</a>
                    <a href="" class="filter-btn">3月以上</a>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt class="filter-title">平均收益：</dt>
                  <dd>
                    <a href="" class="filter-btn active">不限</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                    <a href="" class="filter-btn">6%以上</a>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-pills-filter"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;dl&gt;</span>
      <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"filter-title"</span><span class="nt">&gt;</span>热门推荐：<span class="nt">&lt;/dt&gt;</span>
      <span class="nt">&lt;dd</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn active"</span><span>&gt;</span>全部<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>收益最优<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>人气最旺<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;dl&gt;</span>
      <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"filter-title"</span><span class="nt">&gt;</span>购买期限：<span class="nt">&lt;/dt&gt;</span>
      <span class="nt">&lt;dd</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn active"</span><span>&gt;</span>不限<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>30天以内<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>1-2月<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>1-3月<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>3月以上<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;dl&gt;</span>
      <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"filter-title"</span><span class="nt">&gt;</span>平均收益：<span class="nt">&lt;/dt&gt;</span>
      <span class="nt">&lt;dd</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn active"</span><span>&gt;</span>不限<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>6%以上<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>10%以上<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>12%以上<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"filter-btn"</span><span>&gt;</span>18%以上<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <h2 id="Panels">Panels</h2>
          <p style="color: red;">注意：面板是无边框的，为了演示效果加了阴影突出</p>
          <div class="example example-panels">
            <div class="panel">
              <div class="panel-heading">关于我们-平台保障</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">T计划-领先型</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading">平台数据</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-md">
              <div class="panel-heading">个人中心-之家钱包</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-tip" style="box-shadow: none;">
              <div class="panel-heading">个人中心-之家钱包</div>
              <div class="panel-body">
                使用积分在积分商城兑换平台加息券<br />使用积分在积分商城兑换平台加息券
                <p>使用积分在积分商城兑换平台加息券<br />使用积分在积分商城兑换平台加息券</p>
              </div>
            </div>
          </div>
          <figure class="highlight __web-inspector-hide-shortcut__"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>关于我们-平台保障<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">&gt;</span>
    Panel content
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-default"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">&gt;</span>T计划-领先型<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">&gt;</span>
    Panel content
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">&gt;</span>平台数据<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">&gt;</span>
    Panel content
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
          
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-md"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">&gt;</span>平台数据<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">&gt;</span>
    Panel content
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
          
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-tip"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">&gt;</span>平台数据<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">&gt;</span>
    使用积分在积分商城兑换平台加息券
    <span class="nt">&lt;p</span><span class="nt">&gt;</span>
      使用积分在积分商城兑换平台加息券
    <span class="nt">&lt;/p</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <h2 id="DataUnit">Data Unit</h2>
          <div class="example example-data-unit">
            <div class="usercenter-content">
              <div class="panel panel-md">
                <div class="panel-body">
                  <div class="data-unit unit-2 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-3 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl class="last">
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-3 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl class="last">
                      <dt><a href="" class="btn btn-highlight btn-xs pull-left">充值</a></dt>
                      <dd><a href="" class="btn btn-primary btn-xs pull-left">提现</a></dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-4 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl class="last">
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-4 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl class="last">
                      <dt><a href="" class="btn btn-highlight btn-xs pull-left">充值</a></dt>
                      <dd><a href="" class="btn btn-primary btn-xs pull-left">提现</a></dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-5 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl class="last">
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                  </div>
                  <div class="data-unit unit-5 unit-bordered">
                    <dl>
                      <dt>总资产(元)</dt>
                      <dd>23,000.35</dd>
                    </dl>
                    <dl>
                      <dt>待收本息(元)</dt>
                      <dd>12,234.23</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl>
                      <dt>可用余额(元)</dt>
                      <dd>102.04</dd>
                    </dl>
                    <dl class="last">
                      <dt><a href="" class="btn btn-highlight btn-xs pull-right">充值</a></dt>
                      <dd><a href="" class="btn btn-primary btn-xs pull-right">提现</a></dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h2 id="Dropdowns">Dropdowns</h2>
          <div class="example example-dropdowns">
            <div class="dropdown open">
              <a class="btn btn-default btn-xs btn-block"><span>下拉菜单</span><i class="caret"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="dropdown">
              <a class="btn btn-default btn-xs btn-block dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>下拉菜单</span><i class="caret"></i>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="dropdown dropdown-primary open">
              <a class="btn btn-primary btn-inverse btn-xs btn-block"><span>下拉菜单</span><i class="caret"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="dropdown dropdown-primary">
              <a class="btn btn-primary btn-inverse btn-xs btn-block dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>下拉菜单</span><i class="caret"></i>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li><a href="">Action</a></li>
                <li><a href="">Another action</a></li>
                <li><a href="">Something else here</a></li>
                <li><a href="">Separated link</a></li>
              </ul>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-default btn-xs btn-block dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu1"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span&gt;</span>Dropdownspan<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">&gt;&lt;/i&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu1"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown dropdown-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-inverse btn-xs btn-block dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu3"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span&gt;</span>Dropdownspan<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">&gt;&lt;/i&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu3"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <h2 id="Pagination">Pagination</h2>
          <div class="example example-pagination">
            <ul class="pagination">
              <li class="disabled">
                <a href="#" aria-label="Previous" class="pagination-arrow">
                  <span aria-hidden="true" class="glyphicon glyphicon-menu-left"></span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li>
                <a href="#" class="pagination-ellipsis">
                  <span>...</span>
                </a>
              </li>
              <li><a href="#">125</a></li>
              <li>
                <a href="#" aria-label="Next" class="pagination-arrow">
                  <span aria-hidden="true" class="glyphicon glyphicon-menu-right"></span>
                </a>
              </li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span> <span class="na">class=</span><span class="s">"pagination-arrow"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="ni"></span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-menu-left"</span><span class="nt">&gt;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"pagination-ellipsis"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span><span class="nt">&gt;...</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>125<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Next"</span> <span class="na">class=</span><span class="s">"pagination-arrow"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="ni"></span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-menu-right"</span><span class="nt">&gt;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>
          <h2 id="Progressbars">Progress bars</h2>
          <p>条形进度条：</p>
          <div class="example example-progressbar">
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"60"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 60%;"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">环形进度条：</p>
          <div class="example example-progressbar">
            <div class="progress-annulus" role="progressbar" aria-step="54" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="background-position: -3240px;">
                <span class="progress-text">99%</span>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-annulus"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-step=</span><span class="s">"54"</span> <span class="na">aria-valuenow=</span><span class="s">"60"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"background-position: -3240px;"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"progress-text"</span><span class="nt">&gt;</span>99%<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
          <h2 id="Lists">Lists</h2>
          <p>默认一级菜单：</p>
          <div class="example example-list">
            <ul class="list-group">
              <li class="list-group-item active"><a href="#">公司介绍</a></li>
              <li class="list-group-item"><a href="#">安全保障</a></li>
              <li class="list-group-item"><a href="#">公司动态</a></li>
              <li class="list-group-item"><a href="#">行业资讯</a></li>
              <li class="list-group-item"><a href="#">月度报告</a></li>
              <li class="list-group-item"><a href="#">帮助中心</a></li>
            </ul>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>公司介绍<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>安全保障<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>行业资讯<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>月度报告<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>帮助中心<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
         
          <h2 id="Tables">Tables</h2>
          <div class="example example-table">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>title1</th>
                  <th>title2</th>
                  <th>title3</th>
                  <th>title4</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>title1</th>
                  <th>title2</th>
                  <th>title3</th>
                  <th>title4</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>title1</th>
                  <th>title2</th>
                  <th>title3</th>
                  <th>title4</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
            <table class="table table-primary">
              <thead>
                <tr>
                  <th width="20%">title1</th>
                  <th width="25%">title2</th>
                  <th width="25%">title3<span class="glyphicon glyphicon-arrow-up"></span></th>
                  <th width="30%">title4</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
            <div class="wrap">
              <div class="usercenter">
                <table class="table table-primary table-norecord">
                  <thead>
                    <tr>
                      <th>title1</th>
                      <th>title2</th>
                      <th>title3</th>
                      <th>title4</th>
                      <th>title5</th>
                      <th>title6</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="6"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-bordered table-striped table-hover table-norecord"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
      <span class="nt">&lt;th&gt;</span>title1<span class="nt">&lt;/th&gt;</span>
      <span class="nt">&lt;th&gt;</span>title1<span class="nt">&lt;/th&gt;</span>
      <span class="nt">&lt;th&gt;</span>title1<span class="nt">&lt;/th&gt;</span>
      <span class="nt">&lt;th&gt;</span>title1<span class="nt">&lt;/th&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
      <span class="nt">&lt;td&gt;</span>item1<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;td&gt;</span>item1<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;td&gt;</span>item1<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;td&gt;</span>item1<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre></figure>
          <h2 id="Form">Form</h2>
          <p>常用表单元素：</p>
          <div class="example example-form">
            <form>
              <div class="form-group">
                <input type="text" id="username" class="form-control" placeholder="用户名">
              </div>
              <div class="form-group">
                <input type="password" id="password" class="form-control" placeholder="密码">
              </div>
              <div class="form-group">
                <textarea class="form-control" rows="3"></textarea>
              </div>
              <div class="form-group">
                <input type="file" id="exampleInputFile">
              </div>
              <div class="radio">
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                </label>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                </label>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                </label>
              </div>
              <div class="checkbox">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                </label>
              </div>
              <div class="checkbox-primary">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox4" value="活动">活动
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox5" value="新手">新手
                </label>
              </div>
              <input class="btn btn-default btn-lg" type="submit" value="Submit">
              <input class="btn btn-primary btn-lg" type="submit" value="Submit">
              <input class="btn btn-highlight btn-lg" type="submit" value="Submit">
              <input class="btn btn-disabled btn-lg" type="submit" value="Submit">
            </form>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"username"</span> <span class="na">placeholder=</span><span class="s">"用户名"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"密码"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"radio-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span>1
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"radio-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span>2
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"radio-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">value=</span><span class="s">"option3"</span><span class="nt">&gt;</span>3
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"exampleInputFile"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"checkbox-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span>1
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"checkbox-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span>2
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"checkbox-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"option3"</span><span class="nt">&gt;</span>3
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;ipnut</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
  <span class="nt">&lt;ipnut</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
  <span class="nt">&lt;ipnut</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-highlight btn-lg"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
  <span class="nt">&lt;ipnut</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-disabled btn-lg"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">默认行内表格：</p>
          <div class="example example-form">
            <form class="form-inline">
              <div class="form-group">
                <label class="sr-only" for="exampleInputEmail3">邮箱</label>
                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="邮箱">
              </div>
              <div class="form-group">
                <label class="sr-only" for="exampleInputPassword3">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住用户名
                </label>
              </div>
              <button type="submit" class="btn btn-primary btn-lg">登录</button>
            </form>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail3"</span><span class="nt">&gt;</span>邮箱<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail3"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputPassword3"</span><span class="nt">&gt;</span>密码<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword3"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> 记住用户名
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>登录<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">方角表格：</p>
          <div class="example example-form">
            <form class="form-inline form-square">
              <div class="form-group">
                <label class="sr-only" for="exampleInputEmail3">邮箱</label>
                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="邮箱">
              </div>
              <div class="form-group">
                <label class="sr-only" for="exampleInputPassword3">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住用户名
                </label>
              </div>
              <button type="submit" class="btn btn-primary btn-lg">登录</button>
            </form>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline form-square"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail3"</span><span class="nt">&gt;</span>邮箱<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail3"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputPassword3"</span><span class="nt">&gt;</span>密码<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword3"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> 记住用户名
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>登录<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></figure>
          <p style="margin-top: 15px;">特殊行内表单：</p>
          <div class="example example-form">
            <form class="form-inline form-underlined">
              <div class="form-group">
                <label for="exampleInputName1">我要购买：</label>
                <input type="text" class="form-control" id="exampleInputName1" placeholder="起买金额100元起">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">购买期限：</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="请选择购买期限">
                <div class="dropdown">
                  <a id="dLabel" class="btn btn-block" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="dLabel">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <input type="submit" class="btn btn-primary btn-lg" value="提交">
            </form>
          </div>
          <p style="margin-top: 15px;">横向表单：</p>
          <div class="example example-form">
            <form class="form-horizontal" style="width: 600px;">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的密码">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 记住用户名
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <input type="submit" class="btn btn-primary btn-lg" value="提交">
                </div>
              </div>
            </form>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputEmail3"</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">&gt;</span>邮箱<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail3"</span> <span class="na">placeholder=</span><span class="s">"请输入您的邮箱"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputPassword3"</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">&gt;</span>密码<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword3"</span> <span class="na">placeholder=</span><span class="s">"请输入您的密码"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-offset-2 col-sm-10"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> 记住用户名
        <span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-offset-2 col-sm-10"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>提交<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></figure>
          <h2 id="Tooltips">Tooltips</h2>
          <div class="example example-tooltips">
            <div style="padding: 30px 0 50px;">
              <a href="#" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="right" title="右侧显示右侧显示右侧显示右侧显示右侧显示右侧显示">Right</a>
              <a href="#" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="top" title="顶部显示顶部显示顶部显示顶部显示顶部显示顶部显示">Top</a>
              <a href="#" class="btn btn-highlight btn-sm" data-toggle="tooltip" data-placement="bottom" title="底部显示底部显示底部显示底部显示底部显示底部显示">Bottom</a>
              <a href="#" class="btn btn-primary btn-inverse btn-sm" data-toggle="tooltip" data-placement="left" title="左侧显示左侧显示左侧显示左侧显示左侧显示左侧显示">Left</a>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Some tooltip text!"</span><span class="nt">&gt;</span>Hover over me<span class="nt">&lt;/a&gt;</span></code></pre></figure>
          <h2 id="Modal">Modal</h2>
          <div class="example example-modal">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
              </div>
              <div class="modal-body">
                <p class="modal-main">
                  ContentContentContentContentContentContentContent
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary">确定</button>
                <button type="button" class="btn btn-primary btn-inverse" data-dismiss="modal">取消</button>
              </div>
            </div>
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal1">默认</button>
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal2">成功</button>
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal3">失败</button>
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal4">警告</button>
            <!-- Modal -->
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                  </div>
                  <div class="modal-body">
                    <p class="modal-main">
                      ContentContentContentContentContentContentContent
                    </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-primary btn-inverse" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                  </div>
                  <div class="modal-body">
                    <div class="modal-tip">
                      <i class="modaliIcons modal-icon-success"></i><h5>恭喜你注册成功</h5>
                    </div>
                    <p class="modal-main">
                      ContentContentContentContentContentContentContent
                    </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-primary btn-inverse" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                  </div>
                  <div class="modal-body">
                    <div class="modal-tip">
                      <i class="modaliIcons modal-icon-error"></i><h5>失败</h5>
                    </div>
                    <p class="modal-main">
                      ContentContentContentContentContentContentContent
                    </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-primary btn-inverse" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                  </div>
                  <div class="modal-body">
                    <div class="modal-tip">
                      <i class="modaliIcons modal-icon-warn"></i><h5>无法响应</h5>
                    </div>
                    <p class="modal-main">
                      ContentContentContentContentContentContentContent
                    </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-primary btn-inverse" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-xs"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">&gt;</span>
  默认
<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Modal --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"myModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myModalLabel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
        <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"myModalLabel"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
        ...
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
        </div>
        <div class="col-md-2">
          <ul class="first-nav affix">
            <li>
              <a href="#Breadcrumbs">Breadcrumbs</a>
            </li>
            <li>
              <a href="#Buttons">Buttons</a>
            </li>
            <li>
              <a href="#ButtonGroup">Button groups</a>
            </li>
            <li>
              <a href="#Tabs">Tabs</a>
            </li>
            <li>
              <a href="#Pills">Pills</a>
            </li>
            <li>
              <a href="#PillsFilterGroup">Pills filter group</a>
            </li>
            <li>
              <a href="#Panels">Panels</a>
            </li>
            <li>
              <a href="#DataUnit">DataUnit</a>
            </li>
            <li>
              <a href="#Dropdowns">Dropdowns</a>
            </li>
            <li>
              <a href="#Pagination">Pagination</a>
            </li>
            <li>
              <a href="#Progressbars">Progress bars</a>
            </li>
            <li>
              <a href="#Lists">Lists</a>
            </li>
            <li>
              <a href="#Tables">Tables</a>
            </li>
            <li>
              <a href="#Form">Form</a>
            </li>
            <li>
              <a href="#Tooltips">Tooltips</a>
            </li>
            <li>
              <a href="#Modal">Modal</a>
            </li>
          </ul>
        </div>
      </div>
	  </div>
    
    <!--[if lte IE 9]>
    <script src="js/respond.min.js"></script>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/components.min.js"></script>
    <!-- // <script type="text/javascript" src="public/js/plugins/dropdown.js"></script> -->
    <script type="text/javascript">
    	$(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
    	
    </script>
	</body>
</html>
